<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="1366px">
    <el-form class="form-inline ggg" ref="form" label-width="180px" label-suffix="：">
      <el-steps :active="reportStatus" align-center style="margin-bottom:20px">
        <el-step v-for="(item, index) in stepList" :key="index" :title="item.label" :description="item.time"></el-step>
      </el-steps>
      <el-tabs v-model="activeName">
        <!-- <el-tab-pane v-if="this.fileList.length > 0" label="文件/赔付额" name="zero">
          <ul>
            <li>1、运单</li>
            <li>2、索赔函</li>
            <li>3、购销合同及发票</li>
            <li>4、双港过磅单</li>
            <li>5、现场照片</li>
          </ul>
          <el-form-item label="赔付额">
            {{ lossMoney }}
          </el-form-item>
          <el-form-item label="图片文件">
            <div style="margin-left:90px">
              <div v-for="(item, index) in fileList" :key="index" style="display:inline-block; position:relative">
                <el-image style="width: 100px; height: 100px; " :src="item" :preview-src-list="fileList">
                </el-image>
              </div>
            </div>
          </el-form-item>

        </el-tab-pane> -->
        <el-tab-pane label="理赔账号信息" name="first">
          <el-card class="box-card" shadow="never">
            <el-row :gutter="4">
              <el-col :span="24">
                <div style="overflow:hidden; margin:12px 0">
                  <div style="width:2px; height:14px; float: left; margin-right:5px; background-color: #1890ff; margin-top:3px">
                  </div>
                  <div style="float:left">投保人信息</div>
                </div>
              </el-col>
              <el-col :span="8"><el-form-item label="开户名称" style="width:100%">
                  {{ row.frontReportInsureAccount.accountName }}
                </el-form-item></el-col>
              <el-col :span="8"><el-form-item label="开户类型">
                  {{ row.frontReportInsureAccount.accountType == 1 ? '企业' :
        row.frontReportInsureAccount.accountType == 2 ? '个人' :
            row.frontReportInsureAccount.accountType }}
                </el-form-item></el-col>
              <el-col :span="8"><el-form-item style="width:100%" label="地区">
                  {{ row.frontReportInsureAccount.areaName }}
                </el-form-item></el-col>
              <el-col :span="8"><el-form-item label="地区银行" style="width:100%">
                  {{ row.frontReportInsureAccount.bankName }}
                </el-form-item></el-col>
              <el-col :span="8"><el-form-item label="分支行名称">
                  {{ row.frontReportInsureAccount.bankBranchName }}
                </el-form-item></el-col>
              <el-col :span="8"><el-form-item style="width:100%" label="卡号">
                  {{ row.frontReportInsureAccount.accountNumber }}
                </el-form-item></el-col>
              <el-col :span="8"><el-form-item label="联系方式" style="width:100%">
                  {{ row.frontReportInsureAccount.contactPhone }}
                </el-form-item></el-col>
              <el-col :span="8"><el-form-item label="证件号码">
                  {{ row.frontReportInsureAccount.certificateNumber }}
                </el-form-item></el-col>

              <el-col :span="24">
                <div style="overflow:hidden; margin:12px 0">
                  <div style="width:2px; height:14px; float: left; margin-right:5px; background-color: #1890ff; margin-top:3px">
                  </div>
                  <div style="float:left">报案信息</div>
                </div>
              </el-col>
              <el-col :span="8"><el-form-item label="货物名称" style="width:100%">
                  {{ row.frontReportInsure.goodsName }}
                </el-form-item></el-col>
              <el-col :span="8"><el-form-item label="出险箱号" style="width:100%">
                  {{ row.frontReportInsure.containerNumber }}
                </el-form-item></el-col>
              <el-col :span="8"><el-form-item label="损失金额" style="width:100%">
                  {{ row.frontReportInsure.lossFee }}
                </el-form-item></el-col>
              <el-col :span="8"><el-form-item label="现场联系人" style="width:100%">
                  {{ row.frontReportInsure.sceneName }}
                </el-form-item></el-col>
              <el-col :span="8"><el-form-item label="联系方式" style="width:100%">
                  {{ row.frontReportInsure.scenePhone }}
                </el-form-item></el-col>
              <el-col :span="8"><el-form-item label="出险地址" style="width:100%">
                  {{ row.frontReportInsure.reportPlace }}
                </el-form-item></el-col>
              <el-col :span="8"><el-form-item label="出险原因" style="width:100%">
                  {{ row.frontReportInsure.reportCause }}
                </el-form-item></el-col>
              <el-col :span="8"><el-form-item label="损失情况说明" style="width:100%">
                  {{ row.frontReportInsure.explain }}
                </el-form-item></el-col>
            </el-row>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="保单基本信息" name="second">
          <el-card class="box-card" shadow="never">
            <el-row :gutter="4">
              <el-col :span="24">
                <div style="overflow:hidden; margin:12px 0">
                  <div style="width:2px; height:14px; float: left; margin-right:5px; background-color: #1890ff; margin-top:3px">
                  </div>
                  <div style="float:left">投保人/被投保人信息</div>
                </div>
              </el-col>
              <el-col :span="8"><el-form-item label="投保人" style="width:100%">
                  {{ row.insureName }}
                </el-form-item></el-col>
              <el-col :span="8"><el-form-item label="证件类型">
                  {{ row.insureCertificateType == 1 ? '身份证' : '统一社会信用代码' }}
                </el-form-item></el-col>
              <el-col :span="8"><el-form-item style="width:100%" label="证件号码">
                  {{ row.insureCertificateNumber }}
                </el-form-item></el-col>
              <el-col :span="8"><el-form-item label="被投保人" style="width:100%">
                  {{ row.insuredName }}
                </el-form-item></el-col>
              <el-col :span="8"><el-form-item label="证件类型">
                  {{ row.insuredCertificateType == 1 ? '身份证' : '统一社会信用代码' }}
                </el-form-item></el-col>
              <el-col :span="8"><el-form-item style="width:100%" label="证件号码">
                  {{ row.insuredCertificateNumber }}
                </el-form-item></el-col>
              <el-col :span="8"><el-form-item label="联系人" style="width:100%">
                  {{ row.contactName }}
                </el-form-item></el-col>
              <el-col :span="8"><el-form-item label="联系方式">
                  {{ row.contactPhone }}
                </el-form-item></el-col>
              <el-col :span="8"><el-form-item label="险种">
                  <span @click="copyClick(row.templateCode.includes('gnhy-slhy') ? '水路货运险' : '公路货运险')" class="cursorPointer">{{ row.templateCode.includes('gnhy-slhy') ? '水路货运险' :
        '公路货运险' }}</span>
                </el-form-item></el-col>
              <el-col :span="24">
                <div style="overflow:hidden; margin:12px 0">
                  <div style="width:2px; height:14px; float: left; margin-right:5px; background-color: #1890ff; margin-top:3px">
                  </div>
                  <div style="float:left">货运信息</div>
                </div>
              </el-col>
              <!-- <el-col :span="8"><el-form-item label="标记发票号码运单号" style="width:100%">
                  {{ row.tagInvoiceWaybill }}
                </el-form-item></el-col> -->
              <!-- <el-col :span="8"><el-form-item label="包装和数量" style="width:100%">
                  {{ row.containerCount }}
                </el-form-item></el-col> -->
              <el-col :span="8"><el-form-item label="货物类型" style="width:100%">
                  {{ row.insureGoodsName }}
                </el-form-item></el-col>
              <el-col :span="8"><el-form-item label="货物名称" style="width:100%">
                  {{ row.goodsName }}
                </el-form-item></el-col>
              <el-col :span="8"><el-form-item label="包装" style="width:100%">
                  {{ row.packName }}
                </el-form-item></el-col>
              <el-col :span="8"><el-form-item label="集装箱号" style="width:100%">
                  {{ row.containerNumber }}
                </el-form-item></el-col>
              <el-col :span="24">
                <div style="overflow:hidden; margin:12px 0">
                  <div style="width:2px; height:14px; float: left; margin-right:5px; background-color: #1890ff; margin-top:3px">
                  </div>
                  <div style="float:left">运输信息</div>
                </div>
              </el-col>
              <!-- <el-col :span="8"><el-form-item label="运输工具" style="width:100%">
                  {{ row.transportTool }}
                </el-form-item></el-col>
              <el-col :span="8"><el-form-item label="航次/车牌号" style="width:100%">
                  {{ row.shipNumber }}
                </el-form-item></el-col> -->
              <el-col :span="8"><el-form-item label="运输方式" style="width:100%">
                  {{ row.transportTypeName }}
                </el-form-item></el-col>
              <el-col :span="8"><el-form-item label="启运地" style="width:100%">
                  {{ row.startPlace }}
                </el-form-item></el-col>
              <!-- <el-col :span="8"><el-form-item label="中转地" style="width:100%">
                  {{ row.middlePlace }}
                </el-form-item></el-col> -->
              <el-col :span="8"><el-form-item label="目的地" style="width:100%">
                  {{ row.endPlace }}
                </el-form-item></el-col>
              <el-col :span="8"><el-form-item label="启运日期" style="width: 100%">
                  <span>{{ row.startTime
                                        }}</span>
                </el-form-item></el-col>
              <!-- <el-col :span="24">
                                <div style="overflow:hidden; margin:12px 0">
                                    <div
                                        style="width:2px; height:14px; float: left; margin-right:5px; background-color: #1890ff; margin-top:3px">
                                    </div>
                                    <div style="float:left">扩展保险责任</div>
                                </div>
                            </el-col> -->
              <!-- <el-col :span="24"><el-form-item label="" style="width:100%">
                                    江苏省南京市雨花客厅
                                </el-form-item></el-col> -->
              <div style="overflow:hidden; margin:12px 0">
                <div style="width:2px; height:14px; float: left; margin-right:5px; background-color: #1890ff; margin-top:3px">
                </div>
                <div style="float:left">费用信息</div>
              </div>
              <el-col :span="8"><el-form-item label="保险金额" style="width:100%">
                  {{ row.totalFee }}
                </el-form-item></el-col>
              <el-col :span="8"><el-form-item label="保险费率（单位‰）" style="width:100%">
                  {{ insureRateNum }}
                </el-form-item></el-col>
              <el-col :span="8"><el-form-item label="保险费用" style="width:100%">
                  {{ row.insureFee }}
                </el-form-item></el-col>
              <el-col :span="24">
                <div style="overflow:hidden; margin:12px 0">
                  <div style="width:2px; height:14px; float: left; margin-right:5px; background-color: #1890ff; margin-top:3px">
                  </div>
                  <div style="float:left">发票信息</div>
                </div>
              </el-col>
              <el-col :span="8"><el-form-item label="开具发票" style="width:100%">
                  {{ row.invoiceStatus * 1 ? '是' : '否' }}
                </el-form-item></el-col>
              <el-col :span="8"><el-form-item label="发票类型" style="width:100%">
                  {{ row.invoiceStatus * 1 === 2 ? '专票' : row.invoiceStatus * 1 === 1 ? '普票' : '' }}
                </el-form-item></el-col>

              <div v-if="row.invoiceStatus * 1">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="发票抬头">
                      <span @click="copyClick(row.invoiceHead)" class="cursorPointer">{{row.invoiceHead }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="统一信用代码（税号）">
                      <span @click="copyClick(row.creditCode)" class="cursorPointer">{{row.creditCode }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="收件人电话">
                      <span @click="copyClick(row.consigneePhone)" class="cursorPointer">{{row.consigneePhone }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="收件人邮箱">
                      <span @click="copyClick(row.consigneeMail)" class="cursorPointer">{{row.consigneeMail }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="银行名称">
                      <span @click="copyClick(row.bankBranchName)" class="cursorPointer">{{row.bankBranchName }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="银行账号">
                      <span @click="copyClick(row.bankAccount)" class="cursorPointer">{{row.bankAccount }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="电话号码">
                      <span @click="copyClick(row.companyPhone)" class="cursorPointer">{{row.companyPhone }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="单位地址">
                      <span @click="copyClick(row.registerAddress)" class="cursorPointer">{{row.registerAddress }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24"><el-form-item label="备注">
                      <span @click="copyClick(row.remark)" class="cursorPointer">{{row.remark }}</span>
                    </el-form-item></el-col>
                </el-row>
              </div>
            </el-row>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getLabel } from "@/utils/func.js";
import { ReportStatus } from "@/utils/options";
const Decimal = require("decimal.js");
export default {
  computed: {
    insureRateNum() {
      if (this.row.insureRate) {
        const num1 = new Decimal(this.row.insureRate);
        const num2 = new Decimal("10");
        // 执行乘法运算
        const result = num1.times(num2);
        // 输出结果
        return result;
      } else {
        return 0;
      }
    },
  },
  data() {
    return {
      lossMoney: 0,
      fileList: [],
      getLabel,
      ReportStatus,
      reportStatus: 0,
      stepList: [],
      activeName: "first",
      title: "查看",
      dialogFormVisible: false,
      isExamine: false,
      row: {
        frontReportInsureAccount: {},
        frontReportInsure: {},
        templateCode: "",
      },
    };
  },
  methods: {
    followingClick(orderNum) {
      this.showFollowing = true;
      this.$get("/warranty/insure/reportProcess", {
        orderNum,
      }).then((res) => {
        this.stepList = [];
        res.data.forEach((item) => {
          this.stepList.push({
            label: getLabel(ReportStatus, item.reportStatus),
            time: item.createTime || item.updateTime,
          });
        });
        this.reportStatus = res.data.length;

        const arr = [];
        res.data.forEach((item) => {
          if (item.reportStatus == "4") {
            arr.push(item);
          }
        });
        if (arr.length) {
          this.lossMoney = arr[arr.length - 1].lossMoney;
          this.fileList = arr[arr.length - 1].lossFiles.split(";");
        }
      });
    },
  },
};
</script>
<style lang="less">
.ggg {
  .el-form-item {
    margin-bottom: 0px !important;
  }
}
</style>
